<template>
  <div class="home">
    <van-tabs
      v-model:active="active"
      @click-tab="onClickTab"
      class="wyy-van-tabs"
    >
      <van-tab title="个性推荐"> </van-tab>
      <van-tab title="歌单"></van-tab>
      <van-tab title="主播电台"></van-tab>
      <van-tab title="排行榜"></van-tab>
    </van-tabs>
    <router-view v-slot="{ Component }">
      <transition name="component-fade" mode="out-in">
        <component :is="Component" />
      </transition>
    </router-view>
  </div>
</template>

<script lang="ts">
import { indexTabsJump } from './utils'
import { Toast } from 'vant';
import gexingtuijian from '@/views/recommend/gexingtuijian/gexingtuijian.vue';
import { ref, defineComponent } from 'vue';
import { useRouter } from 'vue-router'
export default defineComponent({
  name: 'recommend',
  components: {
    gexingtuijian,
  },
  setup() {
    const active = ref(0);
    const router = useRouter();
    const onClickTab = ({ title }: { title: string }) => {
      let path = indexTabsJump(title);
      router.push(path);
    };
    return {
      active,
      onClickTab,
    };
  },
});
</script>

<style lang="scss" scoped>
.wyy-van-tabs {
  position: sticky;
  top: 1rem;
  z-index: 20;
}
.component-fade-enter-active,
.component-fade-leave-active {
  transition: opacity 0.2s ease-in-out;
}

.component-fade-enter-from,
.component-fade-leave-to {
  opacity: 0;
}
</style>
